<template>
  <vxe-grid v-bind="gridOptions" ref="vexGridRef">
    <!-- 通用多选框 -->
    <template #checkedBox_header="{ column }">
      <div style="display: flex;align-items: center;">
        <el-checkbox v-model="column.params.all" @change="headerClick(column)"></el-checkbox>
        <span style="margin-left: 5px;">{{ column.title }} </span>

      </div>
    </template>
    <template #seq="{  rowIndex}">
      <vxe-button size="mini" style="padding:0" type="text">
        <span class="vxe-icon-sort"/>{{ rowIndex + 1 }}
      </vxe-button>
    </template>
    <template #checkedBox_default="{ column, row }">
      <el-checkbox v-model="row[column.field]" v-if="column.field == 'visible'" @change="checkBoxClick(column,row)"
                   true-label="1"
                   false-label="0">{{ row.title }}
      </el-checkbox>

      <el-checkbox v-model="row[column.field]" v-else @change="checkBoxClick(column,row)"
                   true-label="1"
                   false-label="0"></el-checkbox>
    </template>
    <!-- 通用下拉框 -->
    <template #select_default="{ column, row }">
      <ol-dict-tag :code="column.params.dictCode" size="mini" clearable @change="doUpdate(row)"
                   v-model="row[column.field]">
      </ol-dict-tag>
    </template>
  </vxe-grid>
</template>
<script>
import {updateSort} from "@/utils/TableSortUtil";
import OlDictTag from "@/components/ol-dict-tag.vue";
import {mapGetters} from "vuex";

export default {
  name: 'columnIndex',
  components: {OlDictTag},
  inject: ['http'],
  computed: {
    ...mapGetters('dict', {
      dictVal: 'val'
    }),
  },
  data() {
    return {
      gridOptions: {
        border: true,
        keepSource: true,
        showOverflow: true,
        loading: false,
        height: 'auto',
        size: 'mini',
        rowConfig: {isHover: true, isCurrent: true},
        editConfig: {
          trigger: 'click',
          showStatus: true,
          mode: 'row'
        },
        align: 'center',
        scrollX: {enabled: true, gt: 15},
        scrollY: {enabled: true, gt: 0},
        columnConfig: {
          resizable: true
        },
        expandConfig: {
          labelField: 'seq'
        },
        checkboxConfig: {
          showHeader: false
        },
        columns: [],
        columnSource: [],
        toolbarConfig: {},
        data: [],
        updateSortMethod: this.doUpdate
      },
    }
  },
  methods: {
    getColumns() {
      return [
        {
          field: 'sort',
          width: 60,
          className: 'move',
          title: "序号",
          slots: {
            default: 'seq'
          }
        },
        {
          field: 'visible',
          align: 'left',
          fixed: 'left',
          params: {
            all: 0
          },
          slots: {
            header: 'checkedBox_header',
            default: 'checkedBox_default'
          },
          minWidth: 120,
          title: '标题'
        },
        {
          field: 'sortable',
          params: {
            dictCode: 'order_by_type'
          },
          slots: {
            default: 'select_default'
          },
          editRender:{},/*
          editRender: {
            props: {clearable: true, filterable: true},
            events: {change: this.update},
            name: '$select',
            options: this.dictVal('order_by_type')
          },*/
          width: 100,
          title: '排序'
        },
        {
          field: 'fixed',
          params: {
            dictCode: 'table_fixed'
          },
          slots: {
            default: 'select_default'
          },
          /*editRender: {
            props: {clearable: true, filterable: true},
            events: {change: this.update}, name: '$select', options: this.dictVal('table_fixed')
          },*/
          width: 100,
          title: '固定'
        },
        /*{
          title: '合计',
          field: 'totalToOtherProp',
          params: {
            dictCode: 'online_calculation_type'
          },
          slots: {
            default: 'select_default'
          },
         /!* editRender: {
            props: {clearable: true, filterable: true},
            events: {change: this.update},
            name: '$select',
            options: this.dictVal('online_calculation_type')
          },*!/
          width: 100,
        }*/
      ]
    },
    update({row}){
      this.doUpdate(row)
    },
    doUpdate(rows) {
      setTimeout(() => {
        if (rows == undefined) {
          rows = this.gridOptions.data;
        }
        rows = rows instanceof Array ? JSON.parse(JSON.stringify(rows)) : [rows]
        let updates = [];
        for (let row of rows) {
          let obj = {id: row.id, field: row.field};
          for (let column of this.gridOptions.columns) {
            obj[column.field] = row[column.field];
          }
          if (obj.field) {
            updates.push(obj);
          }
        }
        this.$emit('update', updates)
      }, 300)
    },
    headerClick(column) {
      let updateSource = [];
      this.gridOptions.data.forEach(row => {
        row[column.field] = column.params.all ? '1' : '0'
        updateSource.push(row)
      })
      this.doUpdate(updateSource)
    },
    checkBoxClick(column, row) {
      let f = true
      this.gridOptions.data.forEach(item => {
        if (item[column.field] != '1') {
          f = false
        }
      })
      column.params.all = f
      if (row != undefined) {
        this.doUpdate(row)
      }
    },
    init({paging}, columns) {
      columns = columns.filter(o => o.columnAuth == 1);
      let columnSource = this.getColumns();
      if (paging == 2) {
        columnSource.push({
          title: '分组',
          field: 'groupToOtherProp',
          width: 60,
          params: {
            all: null
          },
          slots: {
            default: 'checkedBox_default'
          }
        });
        columnSource.push({
          title: '分组类型',
          field: 'groupTotalToOtherProp',
          params: {
            dictCode: 'online_calculation_type'
          },
          width: 100,

          slots: {
            default: 'select_default'
          },
          editRender: {
           /* props: {clearable: true, filterable: true},
            name: '$select',
            options: this.dictVal('online_calculation_type')*/
          },
        });
      }
      this.gridOptions.columns = columnSource;
      this.gridOptions.data = columns
      this.checkBoxClick(this.gridOptions.columns[2])
      updateSort(this.$refs.vexGridRef, this.gridOptions)
    },
  }, mounted() {
    updateSort(this.$refs.vexGridRef, this.gridOptions)
  }
}
</script>
<style scoped>
</style>
